<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
                :changePage="changePage" :change-page-size="changePageSize" :currentPage="page.page" :pageSize="page.page_size">
                <template #status="{rows}">
                    <el-tag v-if="rows.status == 1" type="success">已支付</el-tag>
                    <el-tag v-else type="warning">支付中</el-tag>
                </template>
            </TableCustom>

        </div>
    </div>
</template>

<script setup lang="ts" name="pay-user">
import { ref, reactive } from 'vue';
import { User } from './types/cooperUser';
import { pay_history_list, cancel_order } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOptionList } from '@/types/form-option';
const getNowTime = () => {
    return `${new Date().getFullYear()}-${(new Date().getMonth() + 1) > 9 ? (new Date().getMonth() + 1) : '0' + (new Date().getMonth() + 1)}-${new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate()}`
}
// 查询相关
const query = reactive({
    data_time: [getNowTime(), getNowTime()],
    o_order_code: null,
    // status: null,
    user_telphone: null,
    transaction_id: null,
    status: null,
    // o_pay_status: null,
    // area: '',
});
// 查询条件相关
const searchOpt = ref<FormOptionList[]>([
    { type: 'daterange', label: '查询时间：', prop: 'data_time', placeholder: '请选择时间范围', format: 'YYYY-MM-DD'},
    { type: 'input', label: '订单编号:', prop: 'o_order_code', placeholder: '请输入订单编号' },
    { type: 'input', label: '微信渠道交易单号:', prop: 'transaction_id', placeholder: '请输入微信渠道交易单号' },
    { type: 'select', label: '支付状态:', prop: 'status', placeholder: '请选择支付状态', opts: [{value: 0, label: "未支付"},  {value: 1, label: "已支付"}] },
    { type: 'input', label: '租户手机号:', prop: 'user_telphone', placeholder: '请输入手机号' }
])
const handleSearch = () => {
    console.log(query)
    changePage(1);
};

// 表格相关
let columns = ref([
    { prop: 'transaction_id', label: '支付渠道交易单号' },
    { prop: 'out_trade_no', label: '订单编号' },
    { prop: 'user_telphone', label: '租户' },
    { prop: 'menoy', label: '金额' },
    { prop: 'data_time', label: '支付时间' },
    { prop: 'status', label: '状态' },
])
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref<User[]>([]);
const getData = async () => {
    const res = await pay_history_list({page: page.page, page_size: page.page_size, ...query})
    tableData.value = res.data.data_list;
    page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    console.log(val)
    page.page = val;
    getData();
};
const changePageSize = (val: number) => {
    page.page_size = val;
    getData();
};

</script>

<style scoped></style>